<template>
	<view class="userinfo-container">
		<van-cell-group>
			<van-field readonly :value="userType[userInfo['人员角色']]" label="角色" placeholder="请输入用户名" input-align="right" />
		</van-cell-group>
		<!-- <view class="userinfo-item">
			<text>角色</text>
			<view>{{userInfo['人员角色'] == 1 ? '网格长': '网格员'}}</view>
		</view> -->
		<van-cell-group>
			<van-field readonly maxlength="17" :value="userInfo['人员姓名']" @input="userInfo['人员姓名'] = $event.detail" label="用户名" placeholder="请输入用户名" input-align="right" />
		</van-cell-group>
		<!-- <view class="userinfo-item">
			<text>用户名称</text>
			<view>{{userInfo['人员姓名']}}</view>
		</view> -->
		<van-cell-group>
			<van-field :value="userInfo['所属网格']" label="所属网格" readonly placeholder="请输入联系电话" input-align="right" />
		</van-cell-group>
		<!-- <view class="userinfo-item">
			<text>所属网格</text>
			<view>{{userInfo['所属网格']}}</view>
		</view> -->
		<van-cell-group>
			<van-field maxlength="17" type="number" :value="userInfo['联系电话']" @input="userInfo['联系电话'] = $event.detail" label="联系电话" placeholder="请输入联系电话" input-align="right" />
		</van-cell-group>
		<!-- <view class="userinfo-item">
			<text>联系电话</text>
			<view>{{userInfo['联系电话']}}</view>
		</view> -->
		<van-cell-group>
			<van-field  maxlength="18" type="idcard" :value="userInfo['身份证号']" @input="userInfo['身份证号'] = $event.detail" label="身份证号" placeholder="请输入身份证号" input-align="right" />
		</van-cell-group>
		<!-- <view class="userinfo-item">
			<text>身份证号</text>
			<view>{{userInfo['身份证号']}}</view>
		</view> -->
		<!-- <van-cell-group>
			<van-field maxlength="17" @input="userInfo['居住地址'] = $event.detail" :value="userInfo['居住地址']" label="居住地址" placeholder="请输入居住地址" input-align="right" />
		</van-cell-group> -->
		<!-- <view class="userinfo-item">
			<text>居住地址</text>
			<view>{{userInfo['居住地址']}}</view>
		</view> -->
		<view class="save" @click="updateUserInfo">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userType: {
					1: '网格长',
					2: '网格员'
				}
			}
		},
		onLoad() {
			this.getUserInfo()
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			getUserInfo() {
				this.$http.post('gridSystem/gridAdmin/info', {id: 0}).then(res => {
					if(res.code === 10000){
						this.userInfo = res.data
						uni.setStorageSync('gridInfo', res.data)
					}
				})
			},
			updateUserInfo() {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/gridAdmin/update',this.userInfo).then(res => {
					if(res.code === 10000){
						uni.showToast({
							title: '修改成功'
						})
						uni.setStorageSync('gridInfo', this.userInfo)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.van-field__label {
		color: #000!important;
		padding-left: 6rpx;
	}
	.userinfo-container {
		background-color: #f5f5f5;
		height: 100vh;

		.userinfo-item {
			width: 750rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 60rpx 0 40rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
		}
		.save {
			margin-left: 175rpx;
			margin-top: 140rpx;
			width: 400rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			background: #2E85FB;
			border-radius: 8rpx;
		}
	}
</style>
